"use strict";
const canvas = document.getElementById("canvas1");
const context = canvas.getContext("2d");
const btn = document.querySelector("button");
context.save();
context.lineWidth = 10;
// 线条宽度
// 线条末端样式
context.lineCap = "round";
// 值	描述
// butt	默认。向线条的每个末端添加平直的边缘。
// round	向线条的每个末端添加圆形线帽。
// square	向线条的每个末端添加正方形线帽。
context.lineJoin = "round";
// bevel	创建斜角。
// round	创建圆角。
// miter	默认。创建尖角。
// miterLimit	设置或返回最大斜接长度。不用
context.beginPath();
context.moveTo(100, 100);
context.strokeStyle = "red";
context.lineTo(200, 200);
context.lineTo(100, 200);
context.lineTo(100, 100);
context.stroke();
context.closePath();
context.beginPath();
context.restore();
// 用来指定虚线绘制的偏移距离。
// 数组意思为绘制一个5长度虚线然后距离为10 绘制15长度虚线 然后距离为30
let index = 0;
btn.onclick = function () {
    index++;
};
function render() {
    context.clearRect(10, 250, 600, 600);
    index++;
    context.setLineDash([50, 10]);
    context.lineDashOffset = index; //设置虚线向左偏移
    context.strokeStyle = "red";
    context.moveTo(20, 300);
    context.strokeRect(20, 300, 500, 300);
    requestAnimationFrame(render);
}
render();
context.closePath();
